<template>
  <div class="app-container">
    <div v-if="phoneCheckDetailInfo">
      <div v-for="(item, index) in phoneCheckDetailInfo.phone_check_supplier_record" :key="index">
        <div>{{ '请求时间' + item.created_at }}</div>
        <div>{{ '产品名称：' + item.product.product_name }}</div>
        <div>{{ '产品编号：' + item.product.product_no }}</div>
        <div>{{ '供应商：' + item.product.supplier.name }}</div>
        <div>{{ '请求参数：' }}</div>
        <json-viewer :value="item.request" :expand-depth=4 copyable  sort></json-viewer>
        <div>{{ '响应结果：' }}</div>
        <json-viewer :value="item.response" :expand-depth=4 copyable  sort></json-viewer>
        <el-divider></el-divider>
      </div>
    </div>
  </div>
</template>
<script>
import { phoneCheckDetail } from '@/api/product';
import JsonViewer from 'vue-json-viewer'
export default {
  name: "detail",
  components: { JsonViewer },
  props: {
    formData: {
      type: Object,
      default: null,
    },
  },
  data(){
    return {
      destroyOnClose: false,
      phoneCheckDetailInfo: null
    }
  },
  created(){
    this.getRequestDetail()
  },
  methods:{
    handleSubmit(){
      this.$emit('update:loadingButton', []);
      this.$emit('update:visible', false);
    },
    getRequestDetail(){
      phoneCheckDetail({ id: this.formData.id }).then(res => {
        this.$set( this, 'phoneCheckDetailInfo', res.data )
      })
    }
  }
}
</script>
